$(function () {
    var layer = layui.layer;
    form = layui.form;
    form.verify({
        same: function (value) {
            var uname = $('.layui-form input[name=password]').val()
            if (value !== uname) {
                return '两次输入的密码不一样'
            }
        }
    })
    // 获取数据铺设页面
    let p = {
        pagenum: 1,
        pagesize: 2
    }
    var total = 0;
    function load() {
        axios({
            url: "http://localhost:8888/admin/users",
            params: p,
            method: "GET",
            headers: {
                Authorization: sessionStorage.getItem('mytoken')
            }
        }).then(function (res) {
            // 判断是否是页面中最后一个数据
            if (!Array.isArray(res.data.data)) {
                p.pagenum = p.pagenum - 1
                load()
                return;
            }
            // 保存文章总数量
            total = res.data.total;
            $("tbody").empty()
            res.data.data.forEach((obj) => {
                var tr = `<tr>
                    <td>${obj.id}</td>
                    <td>${obj.username}</td>
                    <td>${obj.nickname}</td>
                    <td>${obj.email}</td>
                    <td>
                    <button class="layui-btn layui-btn-xs edit"><a target='iframeArea' href='./edit.html?id=${obj.id}'>编辑</a></button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs delete">删除</button>
                    <button class="layui-btn layui-btn-normal layui-btn-xs topic">重置密码</button>
                    </td>
                </tr>`
                $("tbody").append(tr)
            })
            // 修改完再去判断每页的数据
            page()
        })
    }
    load()

    function page() {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
                count: total,//数据总数，从服务端得到
                limit: p.pagesize,  // 每页显示的条数
                curr: p.pagenum,
                layout: ["count", "prev", "page", "next", "limit", "skip"],
                limits: [2, 5, 10, 20],
                jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    // console.log(obj.curr);  //得到当前页，以便向服务端请求对应页的数据。
                    // console.log(obj.limit); //得到每页显示的条数
                    p.pagenum = obj.curr;
                    p.pagesize = obj.limit
                    //首次不执行
                    if (!first) {
                        //do something
                        load()
                    }
                }
            });
        });
    }
    // 删除
    $("tbody").on("click", ".delete", function () {
        var theId = $(this).parents("tr").find("td").eq(0).html();
        axios({
            url: "http://localhost:8888/admin/users/" + theId,
            method: "DELETE",
            headers: {
                Authorization: sessionStorage.getItem('mytoken')
            }
        }).then(function (res) {
            load()
        })
    })
    // 编辑
    // $("tbody").on("click", ".edit", function () {
    //     location.href = "./edit.html"
    //     let that = $(this)
    //     function Id() {
    //         return Number(that.parents("tr").find("td").eq(0).html())
    //     }
    //     // Id()
    //     window.parent.Id = Id()
    // })

    // 重置密码
    var str = `<form class="layui-form" style="margin: 30px; margin-left: 0px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input" id="pwd">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" lay-verify="required|same" placeholder="请重复输入新密码" autocomplete="off" class="layui-input" id="pwd1">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>`
    $("tbody").on("click", ".topic", function () {
        let pwd = $(this).parents("tr").find("td").eq(0).html()
        var index = layer.open({
            type: 1,
            title: "重置密码",
            content: str,
            area: ['500px', '300px'],
            success: function () {
                $(".layui-form").on("submit", function (ev) {
                    ev.preventDefault()
                    axios({
                        url: "http://localhost:8888/admin/users/" + pwd,
                        method: "PUT",
                        data: $(".layui-form").serialize(),
                        headers: {
                            Authorization: sessionStorage.getItem('mytoken')
                        }
                    }).then(function (res) {
                        layer.close(index)
                    })
                })
            }
        });
    })

})